<template>
    <div class="top">
        <div class="top_SIDE_1">
            <div class="demonstration">
                <a-select v-model="selectId" @change="onChange" dropdownClassName="procedureCustom"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto',background:'#114868'}"
                    :getPopupContainer="triggerNode=> triggerNode.parentNode">
                    <a-select-option v-for="item in options" :key="item.id" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
                <i class="el-icon-s-tools" @click="handleSet"
                    style="font-size:20px;color:#fff;cursor: pointer;margin:0 16px 0 6px"></i>
            </div>
            <el-button type="text" icon="el-icon-close" @click="exit" style="padding-right: 20px;color:#fff;font-size:18px">退出全屏</el-button>
        </div>
        <div class="boardName fontStyle">{{name}}</div>
    </div>
</template>

<script>
    import {
        processRouteList
    } from '@/api/baseController'
    export default {
        data() {
            return {
                selectId:null,
                daterange: [new Date(), new Date()],
                options:[],
                isFull: false
            }
        },
        props: ['name'],
        mounted() {
            this.processRouteListFn()
        },
        methods: {
            processRouteListFn: async function(){
                const res = await processRouteList({page:1,limit:-1})
                this.options = res.data.records
                if(this.options.length){
                    this.selectId = this.options[0].id
                    this.$emit('getId',this.selectId)
                }
            },
            onChange(value) {
                this.$emit('getId', value)
            },
            exit(){
                document.fullscreenElement === null ? this.$router.push('/home') : document.exitFullscreen()
            },
            handleSet() {
                this.$emit('setBoard')
            },
        }
    }
</script>

<style lang="less" scoped>
    .top {
        position: relative;
        height: 56px;
        margin-bottom: 20px;
        background: url(~@/assets/farmBoard/top.png);
        background-size: 100% 100%;

        .top_SIDE_1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;

            .demonstration {
                display: flex;
                align-items: center;
                padding-left: 20px;

                ::v-deep .ant-select-arrow {
                    margin-top: -7px;
                    color: #fff;
                    font-size: 16px
                }

                ::v-deep .ant-select-selection--single {
                    background: transparent;
                    border: none;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 600;
                    box-shadow: none;

                    .ant-select-selection__rendered {
                        margin-right: 35px;
                    }
                }
            }
        }

        .boardName {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .fontStyle {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }
    }
</style>